import React, { Component } from "react";
import { Link, HashRouter, Route, Switch, withRouter } from "react-router-dom";
import "./LeftNav.css";
import menuList from "../../config/menuConfig";
import { Menu, Button } from "antd";
import {
  AppstoreOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  PieChartOutlined,
  DesktopOutlined,
  ContainerOutlined,
  MailOutlined,
  AppstoreFilled,
} from "@ant-design/icons";

const { SubMenu } = Menu;

class LeftNav extends Component {
  state = {
    collapsed: false,
  };
  getMenulist = (menuList) => {
    // console.log(menuList);
    return menuList.map((item) => {
      if (!item.children) {
        return (
          <Menu.Item key={item.path} icon={<AppstoreFilled />}>
            <Link to={item.path}>{item.authName}</Link>
          </Menu.Item>
        );
      } else {
        return (
          <SubMenu
            key={item.path}
            icon={<MailOutlined />}
            title={item.authName}
          >
            {this.getMenulist(item.children)}
          </SubMenu>
        );
      }
    });
  };
  render() {
    const path = this.props.location.pathname;
    console.log(path);
    return (
      <div className="left_nav">
        <Menu
          selectedKeys={[path]}
          defaultOpenKeys={["/users"]}
          mode="inline"
          theme="dark"
          inlineCollapsed={this.state.collapsed}
        >
          {this.getMenulist(menuList)}
        </Menu>
      </div>
    );
  }
}

//withRouter非路由组件转为路由组件
export default withRouter(LeftNav);
